<template>
    <div id="progressbar" class="mainLoading">
        <section class="container">
            <div class="progress">
                <span id="cbar" class="default" :style="{width : step + '%'}"><span id="cspan">{{step}}%</span></span>
            </div>
        </section>
    </div>
</template>
<script>
export default {
    props: ['step'],
    data (){
        return {

        }
    },
    computed: {

    }

}
</script>
<style scoped>


.mainLoading{
    width: 300px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#cbar{
    width: 0%;
    height: 18px;
    line-height: 18px;
}
.progress {
    height: 20px;
    background: #ebebeb;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-radius: 10px; }
.progress > span {
    position: relative;
    float: left;
    margin: 0 -1px;
    min-width: 30px;
    height: 12px;
    line-height: 16px;
    text-align: right;
    border: 1px solid;
    border-color: #bfbfbf #b3b3b3 #9e9e9e;
    border-radius: 10px;
    background: -webkit-linear-gradient(top, #f0f0f0, #dbdbdb 70%, #ccc);
    background: -moz-linear-gradient(top, #f0f0f0, #dbdbdb 70%, #ccc);
    background: -o-linear-gradient(top, #f0f0f0, #dbdbdb 70%, #ccc);
    background: linear-gradient(to bottom, #f0f0f0, #dbdbdb 70%, #ccc);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); }
.progress > span > span {
    padding: 0 8px;
    font-size: 11px;
    color: #fff;
    text-shadow: 0 1px rgba(255, 255, 255, 0.4); }
.progress > span:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 15px;
    background: url("../assets/progress.png") 0 0 repeat-x;
    border-radius: 10px; }
.progress .default {
    background: #586373;
    border-color: #4d5765 #424a56 #30363f;
    background-image: -webkit-linear-gradient(top, #8b96a6, #6a778a 70%, #586373);
    background-image: -moz-linear-gradient(top, #8b96a6, #6a778a 70%, #586373);
    background-image: -o-linear-gradient(top, #8b96a6, #6a778a 70%, #586373);
    background-image: linear-gradient(to bottom, #8b96a6, #6a778a 70%, #586373); }
.progress .blue {
    background: #407ccd;
    border-color: #336fc1 #2d64ad #25518c;
    background-image: -webkit-linear-gradient(top, #91b3e2, #6092d5 70%, #407ccd);
    background-image: -moz-linear-gradient(top, #91b3e2, #6092d5 70%, #407ccd);
    background-image: -o-linear-gradient(top, #91b3e2, #6092d5 70%, #407ccd);
    background-image: linear-gradient(to bottom, #91b3e2, #6092d5 70%, #407ccd); }
.progress .imgshy {
    background: #3e5b78;
    border-color: #354e67 #2d4256 #1f2d3b;
    background-image: -webkit-linear-gradient(top, #6a8eb2, #4c6f93 70%, #3e5b78);
    background-image: -moz-linear-gradient(top, #6a8eb2, #4c6f93 70%, #3e5b78);
    background-image: -o-linear-gradient(top, #6a8eb2, #4c6f93 70%, #3e5b78);
    background-image: linear-gradient(to bottom, #6a8eb2, #4c6f93 70%, #3e5b78); }
.progress .softred {
    background: #db8a70;
    border-color: #d6795c #d16947 #bf5330;
    background-image: -webkit-linear-gradient(top, #f0cdc1, #e3a591 70%, #db8a70);
    background-image: -moz-linear-gradient(top, #f0cdc1, #e3a591 70%, #db8a70);
    background-image: -o-linear-gradient(top, #f0cdc1, #e3a591 70%, #db8a70);
    background-image: linear-gradient(to bottom, #f0cdc1, #e3a591 70%, #db8a70); }
.progress .desert {
    background: #626c30;
    border-color: #525a28 #424920 #282c14;
    background-image: -webkit-linear-gradient(top, #a1b151, #7c883d 70%, #626c30);
    background-image: -moz-linear-gradient(top, #a1b151, #7c883d 70%, #626c30);
    background-image: -o-linear-gradient(top, #a1b151, #7c883d 70%, #626c30);
    background-image: linear-gradient(to bottom, #a1b151, #7c883d 70%, #626c30); }
.progress .dreamcity {
    background: #d9b111;
    border-color: #c19e0f #aa8a0d #846c0a;
    background-image: -webkit-linear-gradient(top, #f2d55e, #eec625 70%, #d9b111);
    background-image: -moz-linear-gradient(top, #f2d55e, #eec625 70%, #d9b111);
    background-image: -o-linear-gradient(top, #f2d55e, #eec625 70%, #d9b111);
    background-image: linear-gradient(to bottom, #f2d55e, #eec625 70%, #d9b111); }
.progress .autumn {
    background: #10c590;
    border-color: #0ead7f #0c966e #097052;
    background-image: -webkit-linear-gradient(top, #4bf0c0, #13ebac 70%, #10c590);
    background-image: -moz-linear-gradient(top, #4bf0c0, #13ebac 70%, #10c590);
    background-image: -o-linear-gradient(top, #4bf0c0, #13ebac 70%, #10c590);
    background-image: linear-gradient(to bottom, #4bf0c0, #13ebac 70%, #10c590); }
.progress .sunrise {
    background: #6200c5;
    border-color: #5500ac #490092 #340069;
    background-image: -webkit-linear-gradient(top, #952cff, #7600ee 70%, #6200c5);
    background-image: -moz-linear-gradient(top, #952cff, #7600ee 70%, #6200c5);
    background-image: -o-linear-gradient(top, #952cff, #7600ee 70%, #6200c5);
    background-image: linear-gradient(to bottom, #952cff, #7600ee 70%, #6200c5); }
.progress .iceriver {
    background: #e09e50;
    border-color: #dc923a #d78626 #b47020;
    background-image: -webkit-linear-gradient(top, #efcea7, #e6b173 70%, #e09e50);
    background-image: -moz-linear-gradient(top, #efcea7, #e6b173 70%, #e09e50);
    background-image: -o-linear-gradient(top, #efcea7, #e6b173 70%, #e09e50);
    background-image: linear-gradient(to bottom, #efcea7, #e6b173 70%, #e09e50); }
.progress .pinkgirl {
    background: #eb6877;
    border-color: #e85163 #e53b4e #da1d33;
    background-image: -webkit-linear-gradient(top, #f7c2c8, #f08c97 70%, #eb6877);
    background-image: -moz-linear-gradient(top, #f7c2c8, #f08c97 70%, #eb6877);
    background-image: -o-linear-gradient(top, #f7c2c8, #f08c97 70%, #eb6877);
    background-image: linear-gradient(to bottom, #f7c2c8, #f08c97 70%, #eb6877); }
.progress .simplest {
    background: #438fd9;
    border-color: #2e82d5 #2776c2 #2061a0;
    background-image: -webkit-linear-gradient(top, #98c2ea, #65a3e0 70%, #438fd9);
    background-image: -moz-linear-gradient(top, #98c2ea, #65a3e0 70%, #438fd9);
    background-image: -o-linear-gradient(top, #98c2ea, #65a3e0 70%, #438fd9);
    background-image: linear-gradient(to bottom, #98c2ea, #65a3e0 70%, #438fd9); }
.progress .infinitegreen {
    background: #f5df37;
    border-color: #f4db1f #edd30c #c6b00a;
    background-image: -webkit-linear-gradient(top, #faef98, #f7e55e 70%, #f5df37);
    background-image: -moz-linear-gradient(top, #faef98, #f7e55e 70%, #f5df37);
    background-image: -o-linear-gradient(top, #faef98, #f7e55e 70%, #f5df37);
    background-image: linear-gradient(to bottom, #faef98, #f7e55e 70%, #f5df37); }
.progress .universe {
    background: #7a2fda;
    border-color: #6d24cb #6220b6 #4f1a93;
    background-image: -webkit-linear-gradient(top, #b186e9, #9052e0 70%, #7a2fda);
    background-image: -moz-linear-gradient(top, #b186e9, #9052e0 70%, #7a2fda);
    background-image: -o-linear-gradient(top, #b186e9, #9052e0 70%, #7a2fda);
    background-image: linear-gradient(to bottom, #b186e9, #9052e0 70%, #7a2fda); }
.progress .iron {
    background: #f5d862;
    border-color: #f3d24a #f2cc32 #ecc10f;
    background-image: -webkit-linear-gradient(top, #fbf0c2, #f7e288 70%, #f5d862);
    background-image: -moz-linear-gradient(top, #fbf0c2, #f7e288 70%, #f5d862);
    background-image: -o-linear-gradient(top, #fbf0c2, #f7e288 70%, #f5d862);
    background-image: linear-gradient(to bottom, #fbf0c2, #f7e288 70%, #f5d862); }
.progress .bluedanube {
    background: #f49b27;
    border-color: #f3900f #dd820b #b66b09;
    background-image: -webkit-linear-gradient(top, #f9c888, #f6ad4e 70%, #f49b27);
    background-image: -moz-linear-gradient(top, #f9c888, #f6ad4e 70%, #f49b27);
    background-image: -o-linear-gradient(top, #f9c888, #f6ad4e 70%, #f49b27);
    background-image: linear-gradient(to bottom, #f9c888, #f6ad4e 70%, #f49b27); }
.progress .greenleaf {
    background: #649704;
    border-color: #547e03 #436503 #293e02;
    background-image: -webkit-linear-gradient(top, #a5f809, #7ebf05 70%, #649704);
    background-image: -moz-linear-gradient(top, #a5f809, #7ebf05 70%, #649704);
    background-image: -o-linear-gradient(top, #a5f809, #7ebf05 70%, #649704);
    background-image: linear-gradient(to bottom, #a5f809, #7ebf05 70%, #649704); }
.progress .redleaf {
    background: #10c590;
    border-color: #0ead7f #0c966e #097052;
    background-image: -webkit-linear-gradient(top, #4bf0c0, #13ebac 70%, #10c590);
    background-image: -moz-linear-gradient(top, #4bf0c0, #13ebac 70%, #10c590);
    background-image: -o-linear-gradient(top, #4bf0c0, #13ebac 70%, #10c590);
    background-image: linear-gradient(to bottom, #4bf0c0, #13ebac 70%, #10c590); }
.progress .glasspyramid {
    background: #c9c7b1;
    border-color: #bfbca2 #b4b193 #a3a07b;
    background-image: -webkit-linear-gradient(top, #f3f2ed, #dad8c9 70%, #c9c7b1);
    background-image: -moz-linear-gradient(top, #f3f2ed, #dad8c9 70%, #c9c7b1);
    background-image: -o-linear-gradient(top, #f3f2ed, #dad8c9 70%, #c9c7b1);
    background-image: linear-gradient(to bottom, #f3f2ed, #dad8c9 70%, #c9c7b1); }
.progress .spectacle {
    background: #f16a5c;
    border-color: #ef5545 #ed3f2d #de2613;
    background-image: -webkit-linear-gradient(top, #f9c0ba, #f48c82 70%, #f16a5c);
    background-image: -moz-linear-gradient(top, #f9c0ba, #f48c82 70%, #f16a5c);
    background-image: -o-linear-gradient(top, #f9c0ba, #f48c82 70%, #f16a5c);
    background-image: linear-gradient(to bottom, #f9c0ba, #f48c82 70%, #f16a5c); }
.progress .infinite {
    background: #e9009d;
    border-color: #d0008c #b6007b #8d005f;
    background-image: -webkit-linear-gradient(top, #ff50c6, #ff13b2 70%, #e9009d);
    background-image: -moz-linear-gradient(top, #ff50c6, #ff13b2 70%, #e9009d);
    background-image: -o-linear-gradient(top, #ff50c6, #ff13b2 70%, #e9009d);
    background-image: linear-gradient(to bottom, #ff50c6, #ff13b2 70%, #e9009d); }
.progress .sevenup {
    background: #fcb341;
    border-color: #fca928 #fb9f0f #de8904;
    background-image: -webkit-linear-gradient(top, #fedba5, #fdc369 70%, #fcb341);
    background-image: -moz-linear-gradient(top, #fedba5, #fdc369 70%, #fcb341);
    background-image: -o-linear-gradient(top, #fedba5, #fdc369 70%, #fcb341);
    background-image: linear-gradient(to bottom, #fedba5, #fdc369 70%, #fcb341); }
.progress .peace {
    background: #55afbf;
    border-color: #45a5b6 #3e94a3 #327986;
    background-image: -webkit-linear-gradient(top, #9fd2db, #73bdca 70%, #55afbf);
    background-image: -moz-linear-gradient(top, #9fd2db, #73bdca 70%, #55afbf);
    background-image: -o-linear-gradient(top, #9fd2db, #73bdca 70%, #55afbf);
    background-image: linear-gradient(to bottom, #9fd2db, #73bdca 70%, #55afbf); }
.progress .chinared {
    background: #e8a117;
    border-color: #d19115 #ba8112 #94670f;
    background-image: -webkit-linear-gradient(top, #f1c774, #ecb03c 70%, #e8a117);
    background-image: -moz-linear-gradient(top, #f1c774, #ecb03c 70%, #e8a117);
    background-image: -o-linear-gradient(top, #f1c774, #ecb03c 70%, #e8a117);
    background-image: linear-gradient(to bottom, #f1c774, #ecb03c 70%, #e8a117); }
.progress .green {
    background: #e2b70d;
    border-color: #caa30c #b2900a #8b7108;
    background-image: -webkit-linear-gradient(top, #f6d75f, #f2c925 70%, #e2b70d);
    background-image: -moz-linear-gradient(top, #f6d75f, #f2c925 70%, #e2b70d);
    background-image: -o-linear-gradient(top, #f6d75f, #f2c925 70%, #e2b70d);
    background-image: linear-gradient(to bottom, #f6d75f, #f2c925 70%, #e2b70d); }
.progress .mysterious {
    background: #1695ed;
    border-color: #1187d9 #0f78c1 #0c619b;
    background-image: -webkit-linear-gradient(top, #75c0f4, #3ca6f0 70%, #1695ed);
    background-image: -moz-linear-gradient(top, #75c0f4, #3ca6f0 70%, #1695ed);
    background-image: -o-linear-gradient(top, #75c0f4, #3ca6f0 70%, #1695ed);
    background-image: linear-gradient(to bottom, #75c0f4, #3ca6f0 70%, #1695ed); }
.progress .violet {
    background: #6a13d5;
    border-color: #5e11be #530fa6 #400b81;
    background-image: -webkit-linear-gradient(top, #9f5df1, #7e25ec 70%, #6a13d5);
    background-image: -moz-linear-gradient(top, #9f5df1, #7e25ec 70%, #6a13d5);
    background-image: -o-linear-gradient(top, #9f5df1, #7e25ec 70%, #6a13d5);
    background-image: linear-gradient(to bottom, #9f5df1, #7e25ec 70%, #6a13d5); }
.progress .windbloom {
    background: #39afcd;
    border-color: #30a0bd #2b8fa8 #227388;
    background-image: -webkit-linear-gradient(top, #8ad0e2, #5abcd5 70%, #39afcd);
    background-image: -moz-linear-gradient(top, #8ad0e2, #5abcd5 70%, #39afcd);
    background-image: -o-linear-gradient(top, #8ad0e2, #5abcd5 70%, #39afcd);
    background-image: linear-gradient(to bottom, #8ad0e2, #5abcd5 70%, #39afcd); }
.progress .tulips {
    background: #9d2200;
    border-color: #841c00 #6a1700 #410e00;
    background-image: -webkit-linear-gradient(top, #ff3a04, #c62b00 70%, #9d2200);
    background-image: -moz-linear-gradient(top, #ff3a04, #c62b00 70%, #9d2200);
    background-image: -o-linear-gradient(top, #ff3a04, #c62b00 70%, #9d2200);
    background-image: linear-gradient(to bottom, #ff3a04, #c62b00 70%, #9d2200); }
.progress .king {
    background: #5a4025;
    border-color: #48331e #362616 #19120a;
    background-image: -webkit-linear-gradient(top, #a27343, #775531 70%, #5a4025);
    background-image: -moz-linear-gradient(top, #a27343, #775531 70%, #5a4025);
    background-image: -o-linear-gradient(top, #a27343, #775531 70%, #5a4025);
    background-image: linear-gradient(to bottom, #a27343, #775531 70%, #5a4025); }
.progress .lnkgreen {
    background: #1d2e04;
    border-color: #0e1702 black black;
    background-image: -webkit-linear-gradient(top, #588c0c, #355407 70%, #1d2e04);
    background-image: -moz-linear-gradient(top, #588c0c, #355407 70%, #1d2e04);
    background-image: -o-linear-gradient(top, #588c0c, #355407 70%, #1d2e04);
    background-image: linear-gradient(to bottom, #588c0c, #355407 70%, #1d2e04); }
 .progress .ice {
     background: #50667D;
     border-color: #0e1702 black black;
     background-image: -webkit-linear-gradient(top, #738597, #738597 70%, #1d2e04);
     background-image: -moz-linear-gradient(top, #738597, #738597 70%, #1d2e04);
     background-image: -o-linear-gradient(top, #738597, #738597 70%, #1d2e04);
     background-image: linear-gradient(to bottom, #738597, #738597 70%, #1d2e04); }
   .progress .business {
     background: #696E84;
     border-color: #0e1702 black black;
     background-image: -webkit-linear-gradient(top, #696E84, #696E84 70%, #1d2e04);
     background-image: -moz-linear-gradient(top, #696E84, #696E84 70%, #1d2e04);
     background-image: -o-linear-gradient(top, #696E84, #696E84 70%, #1d2e04);
     background-image: linear-gradient(to bottom, #696E84, #696E84 70%, #1d2e04); }
   .progress .white {
     background: #696E84;
     border-color: #0e1702 black black;
     background-image: -webkit-linear-gradient(top, #696E84, #696E84 70%, #1d2e04);
     background-image: -moz-linear-gradient(top, #696E84, #696E84 70%, #1d2e04);
     background-image: -o-linear-gradient(top, #696E84, #696E84 70%, #1d2e04);
     background-image: linear-gradient(to bottom, #696E84, #696E84 70%, #1d2e04); }

@import '../assets/progressjs.min.css'
</style>
